<template>
    <div>
        <div class="left">
            <ul>
                <li v-for="(item,index) in type" :key="index" :class="{active:cur==index}" @click="typeTab(index)">
                    <span>{{item}}</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <!-- 户外 -->
            <div class="huwai_wp">
                <p class="huwai_title">{{type[cur]}}系列</p>
                <div>
                    <ul style="display:flex;flex-wrap:wrap;">
                        <li class="item" v-for="(item,index) in data">
                            <div class="item_wp">
                                <img :src=item.img class="item_img">
                                <p class="types">{{item.title}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import column from './type.js'
export default {
    data() {
        return {
            type: [
                "户外",
                "男鞋",
                "女鞋",
                "男装",
                "运动",
                "瑜伽",
                "童装",
                "箱包",
                "配饰",
                "家居",
                "内衣"
            ],
            cur: 0,
            data:[],
        };
    },
    methods: {
        typeTab(i) {
            this.cur = i;
        }
    },
    watch:{
        cur(val,oldval){
            this.data=column[val];
        }   
    },
    mounted(){
        this.data=column[this.cur];
    }
};
</script>

<style scoped>
ul {
    list-style: none;
}
.item {
    margin-top: 0.13rem;
}
.item_img {
    width: 0.81rem;
}
.item_wp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.types {
    font-size: 0.01rem;
}
.left {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    border-top: 1px solid #f4f3f3;
    margin-bottom: 0.38rem;
    margin-top: 0.384rem;
    border-bottom: 1px solid #f4f3f3;
    width: 0.704rem;
    border-right: 1px solid #f4f3f3;
}
.right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0.704rem;
    border-top: 1px solid #f4f3f3;
    margin-bottom: 0.38rem;
    margin-top: 0.384rem;
    border-bottom: 1px solid #f4f3f3;
    border-top: 1px solid #f4f3f3;
    height: 100%;
}
.left li {
    margin-top: 0.19rem;
    text-align: center;
}
.active {
    color: #ab2b2b;
    transform: scale(1.2);
}
.huwai_wp {
    padding: 0.064rem 0 0 0.064rem;
}
.huwai_title {
    font-size: 0.01rem;
    text-align: center;
    position: relative;
    margin-top: 0.1rem;
}
.huwai_title:before,
.huwai_title:after {
    position: absolute;
    content: "";
    margin: auto;
    height: 1px;
    background-color: #d9d9d9;
    width: 0.17rem;
    display: block;
    top: 0.06rem;
}
.huwai_title:before {
    left: 0.7rem;
}
.huwai_title:after {
    right: 0.7rem;
}
</style>
